/* pages/shopping/goods-list/index.wxss */

// 分类列表
.category-list-wrapper {
  width: 100rpx;
  // height: 100vh;
  position: sticky;
  top: 0;
  .category-scroll {
      height: 100%;
      ::-webkit-scrollbar {
          display: none;
      }
  }
  .category-list {
      padding-bottom: 600rpx;
      .category-item {
          padding-top: 10rpx;
          .category-img-view {
              position: relative;
              z-index: 10;
              top: 16rpx;
              .cetegory-img {
                  width: 50rpx;
                  max-height: 50rpx;
              }
          }
          .category-text-view{
              padding: 16rpx 20rpx;
              position: relative;
              z-index: 1;
              color: #1f1a1b;
              .category-text {
                  font-size: 24rpx;
                  text-align: center;
                  line-height: 30rpx;
                  white-space: pre-wrap;
              }
              &::after {
                  position: absolute;
                  content: "";
                  width: 70%;
                  height: 0;
                  border-bottom: 1px solid rgb(226, 225, 225);
                  bottom: -3px;
                  left: 50%;
                  transform: translateX(-50%);
                  transition: .3s;
              }
          }

          .category-text-view-actived {
              color: #fff;
              background-color: var(--primary-color);
              font-weight: bold;
              border-top-right-radius: 10rpx;
              border-bottom-right-radius: 10rpx;
          }
      }
  }

  .img-zoom-in {
      animation: ZoomInOut .4s forwards;
      animation-duration: 400ms;
  }
}

// 商品列表
.goods-list-wrapper {
  padding: 26rpx 26rpx 600rpx 26rpx;
  .divider-box {
      color: #303030;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      border: 0 solid #ebedf0;
      &::before, &::after {
          content: "";
          flex: 1;
          border-color: inherit;
          border-style: inherit;
          border-width: 1px 0 0;
      }

      image {
          width: 28rpx;
          height: 28rpx;
          margin: 0 12rpx;
          &:first-child {
              transform: scaleX(-1);
          }
      }
  }

  .goods-item {
      margin-top: 15px;
      position: relative;
      .goods-item-inner {
          background-color: #fff;
          border-radius: 10rpx;
          border: .05rem solid hsla(0, 0%, 91%, .7);
          overflow: hidden;
          .goods-item-left {
              padding: 4rpx;
              .goods-item-img {
                  width: 300rpx;
                  height: 240rpx;
              }
          }
          .goods-content {
              text-align: right;
              padding: 20rpx 20rpx 0 20rpx;
              position: relative;
              .goods-info {
                  &> text {
                      display: block;
                  }
                  .goods-name {
                      font-size: 26rpx;
                      color: #222222;
                      font-weight: 500;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                  }
                  .goods-unit {
                      font-size: 20rpx;
                      color: #999;
                  }
                  .goods-price {
                      align-items: flex-end;
                      margin-top: 8rpx;
                      .original-price {
                          color: #828282;
                          text-decoration: line-through;
                          font-size: 23rpx;
                          line-height: 27rpx;
                      }
                      .sale-price {
                          color: red;
                          align-items: flex-end;
                          .sale-price-symbol {
                              font-size: 24rpx;
                              line-height: 28rpx;
                          }
                          .sale-price-value {
                              font-weight: 500;
                              font-size: 40rpx;
                              line-height: 36rpx;
                          }
                          .sale-price-word {
                              font-size: 18rpx;
                          }
                      }
                  }
              }
          }
          .btn-choose-box {
              position: absolute;
              bottom: 0;
              right: 20rpx;
              background-color: var(--primary-color);
              border-radius: 10rpx 10rpx 0 0;
              text-align: center;
              min-width: 60rpx;
              color: #fff;
              font-size: 28rpx;
              .btn-choose {
                  padding: 0 20rpx;
                  height: 60rpx;
                  font-size: 26rpx;
                  position: relative;
                  .buy-num {
                      position: absolute;
                      top: -10rpx;
                      right: -10rpx;
                      min-width: 26rpx;
                      height: 26rpx;
                      line-height: 26rpx;
                      border-radius: 100%;
                      font-size: 20rpx;
                      text-align: center;
                      font-weight: 700;
                      color: #fff;
                      background: #363535;
                      padding: 0 4rpx;
                  }
              }
              .sub-add-btn {
                  height: 60rpx;
                  min-width: 70rpx;
                  overflow: hidden;
                  .iconfont {
                      font-size: 30rpx;
                      font-weight: bold;
                  }
              }
          }
      }
  }


  // 已售罄
  .goods-item-cover {
      background-color: rgba(255, 255, 255, 0.6);
      //hsla(0, 0%, 100%, .6);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 4;
      .cover-left {
          width: 300rpx;
          height: 100%;
          .cover-btn {
              color: #fff;
              background-color: rgba(0, 0, 0, .5);
              font-size: 24rpx;
              padding: 10rpx 25rpx;
              border-radius: 30rpx;
          }
      }
  }
}


@keyframes ZoomInOut {
  0% {
      transform: rotate(10deg) scale(0);
  }
  75% {
      transform: rotate(-25deg) scale(1.3);
  }
  100% {
      transform: rotate(0) scale(1);
  }
}